import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Card, message, Transfer, Cascader } from 'antd';

const FormItem = Form.Item;


const targetKeys = [];


@connect(({ general }) => ({
  general,
}))
@Form.create()
export default class AddCommunity extends PureComponent {
  state = {
    targetKeys,
    selectedKeys: [],
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'general/getCommunityList',
      payload: {
      },
    });
    dispatch({
      type: 'general/getProvincesList',
      payload: {
        maxLevel: 2,
      },
    });
  }
  /*
    处理表单数据
   */
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const communityArray = [];
        values.community.map(item => (communityArray.push({ communityId: item })));
        const { dispatch } = this.props;
        dispatch({
          type: 'district/addDistrict',
          payload: {
            districtCommunities: communityArray,
            cityId: Number(values.city[values.city.length - 1]),
            districtName: values.districtName,
          },
          callback: () => {
            this.props.handleAddModal(true);
            this.props.form.resetFields();
          },
        });
      }
    });
  }
  handleScroll = (direction, e) => {
    console.log('direction:', direction);
    console.log('target:', e.target);
  }
  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });

    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    console.log('targetSelectedKeys: ', targetSelectedKeys);
  }
  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys });

    console.log('targetKeys: ', targetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
  }
  render() {
    const { general: { communityList, provincesList } } = this.props;
    console.log(communityList);
    const transferItem = [];
    communityList.map(item => (transferItem.push({ key: item.id, title: item.communityName })));
    const states = this.state;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
        md: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <Card bordered={false}>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="区域名"
          >
            {getFieldDecorator('districtName', {
              rules: [
                {
                  required: true, message: '请输入区域名',
                }],
            })(
              <Input placeholder="请输入区域名" />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="城市"
          >
            {getFieldDecorator('city', {
              rules: [{
                required: true, message: '请选择城市',
              }],
            })(
              <Cascader
                size="large"
                style={{ width: '100%' }}
                options={provincesList}
                placeholder="请选择城市"
              />)}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="小区"
          >
            {getFieldDecorator('community', {
              rules: [{
                required: true, message: '请选择小区',
              }],
            })(
              <Transfer
                dataSource={transferItem}
                titles={['小区列表', '所选小区']}
                targetKeys={states.targetKeys}
                selectedKeys={states.selectedKeys}
                onChange={this.handleChange}
                onSelectChange={this.handleSelectChange}
                onScroll={this.handleScroll}
                render={item => item.title}
              />
            )}
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">保存</Button>
          </FormItem>
        </Form>
      </Card>
    );
  }
}
